import React, { useEffect, useState, useRef } from 'react'
import { Button, PageHeader, Steps, Form, Input, Select, message, notification } from 'antd';
import NewsEditor from '../../../components/news-manage/NewsEditor'
import axios from 'axios'
import style from './News.css'

const { Step } = Steps;
const { Option } = Select;

export default function NewsAdd(props) {
    const [current, setCurrent] = useState(0)
    const [categoryList, setCategoryList] = useState([])
    // 存第一步的表单信息内容
    const [formInfo, setformInfo] = useState([])
    // 存第二步的内容区域信息
    const [content, setContent] = useState('')
    const NewsForm=useRef(null)

    const User=JSON.parse(localStorage.getItem('token'))

    useEffect(() => {
        axios.get('/categories').then(res => {
            setCategoryList(res.data)
        })
    }, [])

    // 下一步
    const handleNext = () => {
        if(current===0){
            // validateFields()判断是否通过表单验证的方法
            NewsForm.current.validateFields().then(res=>{
                setformInfo(res)
                setCurrent(current + 1)
            }).catch(err=>{
                console.log(err);
            })
        }else{
            if (content === '' || content.trim()==='<p></p>'){
                message.error('新闻内容不能为空')
            }else{
                setCurrent(current + 1)

            }
            
        }
    }
    // 上一步
    const handlePrevious = () => {
        setCurrent(current - 1)
    }

    // 保存草稿箱或提交审核
    const hanleSave = (auditState)=>{
        axios.post('/news',{
            ...formInfo,
            "content": content,
            "region": User.region ? User.region:'全球',
            "author": User.username,
            "roleId": User.roleId,
            "auditState": auditState,
            "publishState": 0,
            "createTime": Date.now(),
            "star": 0,
            "view": 0,
            // "publishTime": 0
        }).then(res=>{
            props.history.push(auditState===0?'/news-manage/draft':'/audit-manage/list')

            notification.info({
                message: `通知`,
                description:
                    `你可以到${auditState === 0 ?'草稿箱':'审核列表'}中查看你的信息`,
                placement:'bottomRight',
            });
        })
    }
    return (
        <div>
            {/* 头部 */}
            <PageHeader
                className="site-page-header"
                title="撰写新闻"
            // subTitle="This is a subtitle"
            />
            {/* 标题 */}
            <Steps current={current}>
                <Step title="基本信息" description="新闻标题,新闻分类" />
                <Step title="新闻内容" description="新闻主体内容" />
                <Step title="新闻提交" description="保存草稿或者提交审核" />
            </Steps>

            {/* 内容区域 */}
            <div style={{ marginTop: '50px' }}>
                <div className={current === 0 ? '' : style.active}>
                    <Form
                        ref={NewsForm}
                        name="basic"
                        // 24栅格 label:Input 8:16(1:2的关系占位)
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 20,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        // onFinish={onFinish}
                        // onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="新闻标题"
                            name="label"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="新闻分类"
                            name="categoryId"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Select >
                                {
                                    categoryList.map(item =>
                                        <Option value={item.id} key={item.id}>
                                            {item.label}</Option>
                                    )
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </div>
                <div className={current === 1 ? '' : style.active}>
                    <NewsEditor getContent={(value)=>{
                        setContent(value)
                    }}></NewsEditor>
                </div>
                <div className={current === 2 ? '' : style.active}>

                </div>
            </div>

            {/* 按钮区域 */}
            <div style={{ marginTop: '50px' }}>
                {
                    current === 2 && <span>
                        <Button type='primary' onClick={()=>hanleSave(0)}>保存草稿箱</Button>
                        <Button danger onClick={() => hanleSave(1)}>提交审核</Button>
                    </span>
                }
                {
                    current < 2 && <Button type='primary' onClick={handleNext}>下一步</Button>
                }
                {
                    current > 0 && <Button onClick={handlePrevious}>上一步</Button>
                }
            </div>
        </div>
    )
}
